<template>
  <div class="project-card" @click="onClick">
    <div class="project-header">
      <div class="project-image">
        <img :src="project.image" :alt="project.name" class="img-cover" />
        <div 
          class="project-status-badge"
          :style="{ backgroundColor: statusColor }"
        >{{ statusText }}</div>
      </div>
    </div>
    
    <div class="project-content">
      <h4 class="project-name">{{ project.name }}</h4>
      <p class="project-description">{{ project.description }}</p>
      
      <!-- 进度条（仅进行中项目显示） -->
      <div v-if="project.status === 'active'" class="project-progress">
        <div class="progress-header">
          <span class="progress-label">募集进度</span>
          <span class="progress-value">{{ project.progress }}%</span>
        </div>
        <div class="progress-bar-bg">
          <div 
            class="progress-bar-fill"
            :style="{ 
              width: `${project.progress}%`,
              backgroundColor: progressColor
            }"
          ></div>
        </div>
      </div>
      
      <!-- 项目统计 -->
      <div class="project-stats">
        <div class="stat-item">
          <van-icon name="friends-o" class="stat-icon" />
          <span>{{ project.participants }}人参与</span>
        </div>
        <div class="stat-item">
          <van-icon name="clock-o" class="stat-icon" />
          <span>{{ project.deadline }}</span>
        </div>
      </div>
    </div>
    
    <!-- 项目收益 -->
    <div class="project-earnings" v-if="project.proType === '1'">
      <div class="earnings-label">
        <van-icon name="chart-trending-o" color="var(--primary-color)" />
        <span>预计年化收益</span>
      </div>
      <span class="earnings-value">{{ project.earnings }} %</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  project: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click'])

const onClick = () => {
  emit('click')
}

const statusText = computed(() => {
  const { status, proType } = props.project
  // 根据proType确定项目类型前缀
  const getTypePrefix = (type) => {
    switch (type) {
      case "1":
        return '理财'
      case "2":
        return '质押'
      case "3":
        return '私募'
      default:
        return '理财'
    }
  }
  
  const typePrefix = getTypePrefix(proType)
  
  return {
    'active': `${typePrefix} 进行中`,
    'completed': `${typePrefix} 已结束`
  }[status] || `${typePrefix} 进行中`
})

const statusColor = computed(() => {
  return {
    'active': 'var(--success-color)',
    'completed': 'var(--text-color-lighter)'
  }[props.project.status] || 'var(--success-color)'
})

const progressColor = computed(() => {
  if (props.project.progress >= 80) return 'var(--success-color)'
  else if (props.project.progress >= 50) return 'var(--primary-color)'
  return 'var(--warning-color)'
})
</script>

<style scoped>
.project-card {
  background-color: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--box-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}

.project-card:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.project-header {
  position: relative;
}

.project-image {
  width: 100%;
  height: 140px;
  position: relative;
}

.project-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.project-content {
  padding: 16px;
}

.project-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-description {
  font-size: 13px;
  color: var(--text-color-light);
  margin: 0 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.project-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-color-lighter);
}

.stat-icon {
  margin-right: 4px;
  font-size: 14px;
}

.project-earnings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--background-color-light);
  border-top: 1px solid var(--border-color);
}

.earnings-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-color);
}

.earnings-label .van-icon {
  margin-right: 6px;
  font-size: 16px;
}

.earnings-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--success-color);
}
</style>